<template>
  <el-upload
    v-model:file-list="fileList"
    :action="url"
    :headers="uploadHeader"
    :multiple="props.multiple"
    :limit="props.limit"
    :on-exceed="handleExceed"
    :on-error="handleError"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    ref="uploadRef"
    :accept="props.accept"
    :on-remove="handleRemove"
  >
    <template #trigger>
      <el-button v-if="fileList.length != props.limit" style="float: left">选择文件</el-button>
    </template>
    <template #default>
      <slot name="default"></slot>
    </template>
    <template #tip>
      <el-button
        disabled
        v-if="props.exceedLimitType != 'hide' && fileList.length == props.limit"
        style="float: left"
        >选择文件</el-button
      >
      <div class="el-upload__tip" v-if="props.tip">{{ props.tip }}</div>
    </template>
  </el-upload>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getToken } from "@/utils/auth";
// import { delUploadFile } from "@/api/project/common";
const fileList = defineModel();
const uploadRef = ref();
const uploadHeader = {
  Authorization: "Bearer " + getToken(),
};
const props = defineProps({
  uploadUrl: {
    type: String,
    default: "/commonFile/uploadFile",
  },
  multiple: {
    type: Boolean,
    default: false,
  },
  limit: {
    type: Number,
    default: 10,
  },
  tip: {
    type: String,
    default: "最多可上传10个附件,每个附件大小不超过20M",
  },
  name: {
    type: String,
    default: "file",
  },
  accept: {
    type: String,
    default: "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  exceedLimitType: {
    type: String,
    default: "hide", //超出最大上传数量时是隐藏还是禁用上传按钮
  },
  sizeLimit: {
    type: Number,
    default: 20,
  },
});
//上传地址
const url = computed(() => {
  return import.meta.env.VITE_APP_BASE_API + props.uploadUrl;
});
//文件数量超出限制
const handleExceed = (files, uploadFiles) => {
  ElMessage({
    message: `最多上传${props.limit}个文件！`,
    type: "error",
  });
};
const emit = defineEmits(["change"]);
//删除一个文件
// const beforeRemove = (uploadFile, uploadFiles) => {
//   //发送请求删除文件
//   const id = uploadFile.response ? uploadFile.response.data : uploadFile.id;
//   return delFile(id);
// };
//文件删除成功
const handleRemove = (uploadFile, uploadFiles) => {
  fileList.value = uploadFiles;
  emit("change");
};
//文件上传前校验
const beforeUpload = (file) => {
  const flag = file.size / 1024 / 1024 <= props.sizeLimit; // 检查文件大小是否超出限制
  if (!flag) {
    ElMessage({
      message: `上传文件大小超出最大限制${props.sizeLimit}M`,
      type: "error",
    });
    return false; // 返回false阻止文件上传
  }
  return true; // 返回true允许文件上传
};
//文件上传失败
const handleError = (response) => {
  ElMessage({
    message: `文件上传出错!`,
    type: "error",
  });
};
//文件上传成功
const handleSuccess = (response, UploadFile, uploadFiles) => {
  emit("change");
};
//删除已上传的文件
// const delFile = async (id) => {
//   try {
//     const res = await delUploadFile(id);
//     if (res.code == 200) {
//       return true;
//     } else {
//       return false;
//     }
//   } catch (error) {
//     console.log(error);
//     return false;
//   }
// };
</script>

<style scoped lang="scss"></style>
